<template>
  <view class="dongtai-body">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed :isBack="false">班级动态</tn-nav-bar>
	
  
	<view class="tn-flex tn-flex-direction-column tn-margin-top-sm tn-margin-bottom container" v-if="dongtaiList.length">
	   
	  <!-- 图文信息 -->
	  <block v-for="(item,index) in dongtaiList" :key="index">
		  <view class="item-v" :class="index==0?'fristview':''" :style="index != dongtaiList.length - 1?'margin-bottom:20rpx':''">
	    <view class="blogger__item" >
		  <customHeader :name="item.createUserName" :time="item.createdTime" ></customHeader>
	     
	      <view class="blogger__desc tn-text-justify tn-flex-col-center tn-flex-row-left">
			  <tn-read-more :closeBtn="true" :showHeight="220">
			    <rich-text :nodes="item.content"></rich-text>
			  </tn-read-more>
	      </view>
		  
		  <imgGrid :imgList="item.images"></imgGrid>
	    </view>
	     
	    <view class="action_da_item">
	      <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs">
	        <view class="justify-content-item tn-flex tn-flex-col-center">
				<!-- <text class="blogger__count-icon tn-icon-share"></text> 
	          <text class="tn-color-gray">分享</text> -->
	        </view>
	        <view class="justify-content-item tn-text-center">
	          <view class="">
	            <!-- <text class="blogger__count-icon tn-icon-edit "></text> 
				<span class="tn-padding-left-sm"></span>
	            <text class="blogger__count-icon tn-icon-delete"></text> 
				<span class="tn-padding-left-sm"></span> -->
	            <text class="blogger__count-icon tn-icon-message" style="margin-right: 48rpx;" @touchend="pinglunfunc($event ,item)"></text>
	            <!-- <text v-if="item.leaveMessages.length" class="tn-padding-right msg-count-text">{{ item.leaveMessages.length }}</text> -->
	            <text class="blogger__count-icon tn-icon-like" :style="item.isLike?'color: #189511;':''" @touchend="dianzan(item)"></text>
	            <!-- <text class="like-count-text">{{ item.likeUsers.length }}</text> -->
	          </view>
	        </view>
	      </view>
		</view>
		<view class="dzpl">
			<view class="blogger__item" style="padding: 26rpx 24rpx;line-height: 40rpx;border-bottom: 2rpx solid #e8e8e8;" v-if="item.likeUsers&&item.likeUsers.length">
				<view class="" style=" background-color:#f6f6f6;">
					
					<text class="blogger__count-icon tn-icon-like green-color" ></text> 
					<text class="" v-for="(dianzanren, dianzanrenIndex) in item.likeUsers" :key="dianzanrenIndex">{{dianzanren}}
						<text v-if="dianzanrenIndex < item.likeUsers.length-1">,</text>
					</text>
				</view>
			</view>	
		
			<!-- 评论 -->
			<view class="blogger__item" v-if="item.leaveMessages.length" style="display: flex;">
				<view>
					<text class="blogger__count-icon tn-icon-message green-color"></text>
				</view>
				<view style="flex:1">
				  <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom-sm" v-for="(pinlunitem, pinlinIndex) in item.leaveMessages" :key="pinlinIndex">
					<view class="justify-content-item">
					  <view class="tn-flex tn-flex-col-center tn-flex-row-left">
						<view>
						  <view class="tn-padding-right tn-text-df tn-color-black tn-text-bold">
							{{loginType==2 ? pinlunitem.relationshipChildrenName+pinlunitem.relationshipValue:pinlunitem.leaveMessageUserName}}: <span class="tn-color-gray margin-left-sm">{{pinlunitem.leaveMessageContent}}</span> 
						  </view>
						</view>
					  </view>
					</view>
				  </view>
				</view>
			</view>
		</view>
	    
	    <!-- 边距间隔 -->
	    <!-- <view class="tn-strip-bottom" v-if="index != dongtaiList.length - 1"></view> -->
		</view>
	  </block>
	  
	</view>
	<view class="tn-margin-top-xl tn-padding-top tn-flex tn-flex-row-center" v-else>
		<tn-empty mode="data"></tn-empty>
	</view>
	<tn-button class="fabu__btn" width="80rpx" height="80rpx" backgroundColor="tn-cool-bg-color-7" :fontSize="40" shape="icon" margin="10rpx 10rpx" @click="gofabu"><text class="tn-icon-camera"></text></tn-button>
    
    <tn-popup
	  mode="bottom" v-model="showtnpopup"
    >
      <view class="popup-content">
		  <view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom tn-margin-sm">
		    <view class="content__data tn-flex-1">
		      <tn-input type="text" placeholder="请输入内容" v-model="pinglunneirong" border borderColor="#01BEFF"></tn-input>
		    </view>
		    <view class="content__title fasong__view" @click="fasongpinglun">发送</view>
		  </view>
      </view>
    </tn-popup>
	
	<view v-if="previewImg" class="image-check-view tn-flex tn-flex-col-center" @click="previewImg=''">
		<image class="tn-width-full" :src="previewImg" mode="widthFix"></image>
		<text class="tn-icon-close" @click="previewImg=''"></text>
	</view>
		<tn-toast
		  ref="toast"
		></tn-toast>
  </view>
</template>

<script>
	import customHeader from '../../components/header.vue'
	import imgGrid from '../../components/imgGrid.vue'
  export default {
    name: 'banjidongtai',
	components:{customHeader,imgGrid},
    data(){
      return {
		  haibaoUrl: '/static/1.jpg',
		  showtnpopup: false,
		  currentPinlunItem: null,
		  pinglunneirong: '',
		    // 内容默认隐藏显示的高度
		    contentHideShowHeight: 0,
		    userInfo: {
		      avatar: [
		        'https://tnuiimage.tnkjapp.com/blogger/blogger_avatar_1.jpeg',
		        'https://tnuiimage.tnkjapp.com/blogger/blogger_avatar_2.jpeg',
		        'https://tnuiimage.tnkjapp.com/blogger/blogger_avatar_3.jpeg',
		      ],
		      username: '图鸟北北',
		      desc: ''
		    },
		    tipsDataMessage: {
		      latestMessageUserAvatar: 'https://tnuiimage.tnkjapp.com/blogger/avatar_2.jpeg',
		      messageCount: 3,
		      likeCount: 1290,
		      hotReviewsCount: 896,
		      fansCount: 962,
		      focusCount: 86
		    },
		    dongtaiList: [
		    ],
		    // adSwiperCurrentIndex: 0,
		    adList: [
		      {image: 'https://tnuiimage.tnkjapp.com/swiper/ad1.jpg'},
		      {image: 'https://tnuiimage.tnkjapp.com/swiper/ad2.jpg'},
		      {image: 'https://tnuiimage.tnkjapp.com/swiper/ad3.jpg'},
		      {image: 'https://tnuiimage.tnkjapp.com/swiper/ad4.jpg'},
		      {image: 'https://tnuiimage.tnkjapp.com/swiper/ad5.jpg'}
		    ],
			pageIndex: 1,
			imageTitle: '',
			totalPage: 0,
			loginType: 1,
			previewImg: '',
      }
    },
	onShow() {
		// this.getdongtai();
		this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
		this.getdongtai();
	},
	mounted() {
	  this.loginType = uni.getStorageSync('loginType');
		this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
		// this.haibaoUrl = this.imageTitle + '08db7078-f02c-486f-83f7-4c2052b09c0f'
		this.getdongtai();
	},
    methods: {
		
		getdongtai(){
			if(this.totalPage > 0 && this.pageIndex > this.totalPage){
				this.$refs.toast.show({
				  title: '',
				  content: '没有更多了',
				  icon: '',
				  image: '',
				  duration: 1000
				})
				return;
			}
			this.request({
				url: '/ClassDynamic/MovePage',
				method: 'get',
				params: {
					pageNo: this.pageIndex,
					pageSize: 10
				},
			}).then(res => {
				if(res.code == 200){
					if(this.pageIndex == 1){
						this.dongtaiList = [];
					}
					let rows = res.data.rows;
					this.totalPage = res.data.totalPage;
					rows.forEach(item => {
						if(item.images && item.images.length){
							item.images.forEach(_img => {
								_img['src'] = this.imageTitle + _img.filedId;
								_img['image'] = this.imageTitle + _img.filedId;
							})
							
						}
						this.dongtaiList.push(item);
					})
					console.log(this.dongtaiList)
					uni.stopPullDownRefresh()
				}
			})
		},
      pinglunfunc(e, item){
		  this.currentPinlunItem = item;
		  this.showtnpopup = true;
	  },
	  closedPopup(){
		  this.currentPinlunItem = null;
			this.pinglunneirong = '';
		  console.log('guanbi l 弹框---------',this.currentPinlunItem, '-------', this.pinglunneirong)
	  },
	  async fasongpinglun(){
		if(!this.pinglunneirong){
			return
		}
		let cresult = await this.contentCheck.checkRequest(2, this.pinglunneirong)
		if(!cresult){
			return
		}
		let that = this;
		this.request({
			url: '/ClassDynamic/LeaveMessages',
			method: 'post',
			params: {
				content: this.pinglunneirong,
				classDynamicId: this.currentPinlunItem.id
			},
		}).then(res => {
			if(res.code == 200){
				this.pinglunneirong = '';
				this.showtnpopup = false;
				this.pageIndex = 1;
				this.getdongtai();
				console.log('this.showtnpopup === ',this.showtnpopup)
			}else{
				this.$refs.toast.show({
				  title: '',
				  content: res.message,
				  icon: '',
				  image: '',
				  duration: 1000
				})
			}
		})
	  },
			showImage(item){
				this.previewImg = item.src;
			},
	  gofabu(){
		  uni.navigateTo({
		  	url: '/pages/banjidongtai/fabu'
		  })
	  },
	  dianzan(item){
		  let that = this;
		  this.request({
		  	url: '/DynamicLike/ChangeEnable',
		  	method: 'post',
		  	params: {
		  		isLike: !item.isLike,
		  		classDynamicId: item.id
		  	},
		  }).then(res => {
		  	if(res.code == 200){
		  		this.pageIndex = 1;
		  		this.getdongtai();
		  	}else{
		  		this.$refs.toast.show({
		  		  title: '',
		  		  content: res.message,
		  		  icon: '',
		  		  image: '',
		  		  duration: 1000
		  		})
		  	}
		  })
	  },
    }
  }
</script>

<style lang="scss" scoped>
	.dongtai-body{
		background-color: #F6F6F6;
		// position: absolute;
		// left: 0;
		// right: 0;
		// top: 0;
		// bottom: 55px;
		// overflow-y: auto;
		
		.green-color{
			color: #189511;
		}
		
		.container{
			padding: 0 26rpx;
			padding-bottom: 52px;
			overflow: hidden;
		}
		.fristview{
			margin-top: 105px;
		}
		.item-v{
			color: #555555;
			background-color: #fff;
			border-radius: 16rpx;
			
			.dzpl{
				background-color: #F6F6F6;
				border-radius: 16rpx;
				margin: 40rpx 22rpx 22rpx 22rpx;
			}
		}
	}
	.image-pic{
		width: 100%;
		height: 360rpx;
		overflow: hidden;
		background-repeat: no-repeat;
		background-size: cover;
		background-size:100% 100%;
		background-position: top;
		.img{
			width: 100%;
			height: 100%;
		}
	}
	.image-pic-article{
		width: 100%;
		height: 360rpx;
		position: relative;
	}
  
  /* 信息提示 start */
  .blogger-tips-data {
    background-color: #F8F7F3;
    
    &__wrap {
      border-radius: 60rpx 60rpx 0 0;
    }
    
    &__message {
      padding-top: 60rpx;
      
      &__container {
        padding: 5rpx;
        border-radius: 100rpx;
      }
      
      &__avatar {
        margin: 6rpx 0 0 6rpx;
      }
    }
    
    &__info {
      padding: 40rpx 0 0 0;
    }
  }
  /* 信息提示 end */
  
  /* 文章内容 start*/
  .blogger {
    &__item {
      padding: 26rpx 24rpx;
    }
    
    &__author {
      &__btn {
        margin-right: -12rpx;
        opacity: 0.5;
      }
    }
    
    &__desc {
      line-height: 55rpx;
      
      &__label {
        padding: 0 20rpx;
        margin: 0rpx 18rpx 0 0;
        
        &--prefix {
          color: #00FFC8;
          padding-right: 10rpx;
        }
      }
      &__content {
        
      }
    }
    
    &__content {
      margin-top: 18rpx;
      padding-right: 18rpx;
      
      &__data {
        line-height: 46rpx;
        text-align: justify;
        overflow: hidden;
        transition: all 0.25s ease-in-out;
      }
      
      &__status {
        margin-top: 10rpx;
        font-size: 26rpx;
        color: #82B2FF;
      }
    }
    
    &__main-image {
      border-radius: 16rpx;
      
      &--1 {
        max-width: 80%;
        max-height: 300rpx;
      }
      
      &--2 {
        max-width: 260rpx;
        max-height: 260rpx;
      }
      
      &--3 {
        height: 212rpx;
        width: 100%;
      }
    }
    
    &__count-icon {
      font-size: 40rpx;
      padding-right: 5rpx;
    }
    
    &__ad {
      width: 100%;
      height: 500rpx;
      transform: translate3d(0px, 0px, 0px) !important;
      
      ::v-deep .uni-swiper-slide-frame {
        transform: translate3d(0px, 0px, 0px) !important;
      }
      .uni-swiper-slide-frame {
        transform: translate3d(0px, 0px, 0px) !important;
      }
      
      &__item {
        position: absolute;
        width: 100%;
        height: 100%;
        transform-origin: left center;
        transform: translate3d(100%, 0px, 0px) scale(1) !important;
        transition: transform 0.25s ease-in-out;
        z-index: 1;
        
        &--0 {
          transform: translate3d(0%, 0px, 0px) scale(1) !important;
          z-index: 4;
        }
        &--1 {
          transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
          z-index: 3;
        }
        &--2 {
          transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
          z-index: 2;
        }
      }
      
      &__content {
        border-radius: 40rpx;
        width: 640rpx;
        height: 500rpx;
        overflow: hidden;
      }
      
      &__image {
        width: 100%;
        height: 100%;
      }
    }
  }
  /* 文章内容 end*/
   
   /* 间隔线 start*/
  .tn-strip-bottom {
   width: 100%;
   border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
  }
   /* 间隔线 end*/
  /* 底部悬浮按钮 start*/ 
  .tn-tabbar-height {
  	min-height: 100rpx;
  	height: calc(120rpx + env(safe-area-inset-bottom) / 2);
  }
  .tn-footerfixed {
    position: fixed;
    width: 100%;
    bottom: calc(30rpx + env(safe-area-inset-bottom));
    z-index: 1024;
    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
    
  }
  /* 底部悬浮按钮 end*/
  
  /* 广告内容 start */
  .ad-image{
    width: 80rpx;
    height: 80rpx;
    position: relative;
  }
  .ad-pic{
    background-size: cover;
    background-repeat:no-repeat;
    // background-attachment:fixed;
    background-position:top;
    border-radius: 20%;
  }
  /* 自定义导航栏内容 end */
  
  /* 悬浮 */
  .tnxuanfu{
    animation: suspension 3s ease-in-out infinite;
  }
  
  @keyframes suspension {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-0.8rem);
    }
  }
  /* 悬浮按钮 */
  .button-shop {
    width: 90rpx;
    height: 90rpx;
    display: flex;
    flex-direction: row;
    position: fixed;
    /* bottom:200rpx;
      right: 20rpx; */
    left: 5rpx;
    top: 5rpx;
    z-index: 1001;
    border-radius: 100px;
    opacity: 0.9;
  }
  
  
  /* 按钮 */
  .edit {
    bottom: 300rpx;
    right: 75rpx;
    position: fixed;
    z-index: 9999;
  }
  
  
  .pa,
  .pa0 {
    position: absolute
  }
  
  .pa0 {
    left: 0;
    top: 0
  }
  
  
  .bg0 {
    width: 100rpx;
    height: 100rpx;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .bg1 {
    width: 100%;
    height: 100%;
  }
  
  
  
  
  .hx-box {
    top: 50%;
    left: 50%;
    width: 100rpx;
    height: 100rpx;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
  }
  
  .hx-box .pr {
    width: 100rpx;
    height: 100rpx;
    transform-style: preserve-3d;
    animation: hxz 20s linear infinite;
  }
  
  @keyframes hxz {
    0% {
      transform: rotateX(0deg);
    }
  
    100% {
      transform: rotateX(-360deg);
    }
  }
  
  
  
  .hx-box .pr .pa0 {
    width: 100rpx;
    height: 100rpx;
    /* border: 4px solid #5ec0ff; */
    border-radius: 1000px;
  }
  
  .hx-box .pr .pa0 .span {
    display: block;
    width: 100%;
    height: 100%;
    background: url(https://tnuiimage.tnkjapp.com/cool_bg_image/arc4.png) no-repeat center center;
    background-size: 100% 100%;
    animation: hx 4s linear infinite;
  }
  
  @keyframes hx {
    to {
      transform: rotate(360deg);
    }
  }
  
  .hx-k1 {
    transform: rotateX(-60deg) rotateZ(-60deg)
  }
  
  .hx-k2 {
    transform: rotateX(-30deg) rotateZ(-30deg)
  }
  
  .hx-k3 {
    transform: rotateX(0deg) rotateZ(0deg)
  }
  
  .hx-k4 {
    transform: rotateX(30deg) rotateZ(30deg)
  }
  
  .hx-k5 {
    transform: rotateX(60deg) rotateZ(60deg)
  }
  
  .hx-k6 {
    transform: rotateX(90deg) rotateZ(90deg)
  }
  .margin-left-sm{
	  margin-left: 8px;
  }
  .fasong__view{
	  padding: 0 10px;
  }
  .fabu__btn{
	  position: fixed;
	  bottom: 15%;
	  right: 10px;
  }
  .msg-count-text{
	  font-size: 34rpx;
  }
  .action_da_item{
	padding: 2px 16px;  
  }
	  .image-check-view{
		  position: fixed;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  z-index: 2;
		  background-color: rgba(255, 255, 255, 1);
		  .tn-icon-close{
			  position: absolute;
			  top: 10px;
			  right: 10px;
			  font-size: 36rpx;
			  z-index: 888;
		  }
	  }
	  .like-count-text{
		  
		  
	  }
	  .botmpop{
		  position: fixed;
		  bottom: 0;
		  left: 0;
		  right: 0;
		  background-color: #ffffff;
		  z-index: 10;
	  }
</style>
